<template>
  <div class="shouce_wrappr">
    <!-- <button @click="openBook" class="btns">打开书</button> -->
    <img src="~/static/shouce/com_icon_back_black_44.png" class="closeBtn" @click="closePreviewer" v-show="showPreviewer" alt="" />
    <previewer @on-close="close" :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange">
      <div slot="button-before">
        <span class="previewer-delete-icon-box a1" @click.prevent.stop="openMenu">
          <img src="~/static/shouce/icon_mulu.png" class="previewer-delete-icon" />
        </span>
        <span class="previewer-delete-icon-box a2">
          <img src="~/static/shouce/icon_shouye.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="getToFirst" />
        </span>
        <span class="previewer-delete-icon-box a3">
          <img src="~/static/shouce/icon_shangyiye.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="prePage" />
        </span>
      </div>
      <div slot="button-after">
        <span class="previewer-delete-icon-box a4" @click.prevent.stop="nextPage">
          <img src="~/static/shouce/icon_xiayiye.png" width="22" height="22" class="previewer-delete-icon" />
        </span>
        <span class="previewer-delete-icon-box a5" @click.prevent.stop="getToLast">
          <img src="~/static/shouce/icon_zuihou.png" width="22" height="22" class="previewer-delete-icon" />
        </span>
      </div>
    </previewer>
    <div v-transfer-dom>
      <popup v-model="show8" position="left" width="100%" class="shouce">
        <div class="position-horizontal-demo">
          <div class="menu_header">目录<img @click="closeMenu" src="~/static/images/com_icon_back_close_44.png" alt="" /></div>
          <scroller>
            <div class="menu_box">
              <div class="content">
                <div class="page_box" v-for="(i, index) in list" :key="index">
                  <img @click="getToPage(index)" :src="i.msrc" alt="" class="pages" />
                  <span>{{ index + 1 }}</span>
                </div>
              </div>
            </div>
          </scroller>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { Previewer, TransferDom, Popup } from 'vux'
import { manualList } from '~/api/flight'
import ls from 'store2'
export default {
  directives: {
    TransferDom,
  },
  components: {
    Previewer,
    Popup,
  },
  methods: {
    showConfirm(text, type) {
      let _this = this
      this.$vux.confirm.show({
        // 组件除show外的属性
        content: text,
        maskZIndex: 4999,
        showCancelButton: type,
        onCancel() {
          _this.$router.back()
        },
        onConfirm() {
          if (_this.errMsg === '请先领取手册') {
            _this.commonJs.gopush('../getCard')
          } else {
            _this.$router.back()
          }
        },
      })
    },
    getManualList() {
      this.$loading('open')
      let obj = {
        uid: ls.get('userVoId'),
      }
      manualList(obj)
        .then((res) => {
          if (res.code === 200) {
            this.list = res.data
            this.$nextTick(() => {
              this.$refs.previewer.show(0)
              this.showPreviewer = true
            })
            if (this.list.length > 1) {
              sessionStorage.setItem('manualList', JSON.stringify(this.list))
            }
          } else {
            this.errMsg = res.msg
            if (this.errMsg === '请先领取手册') {
              this.showConfirm(res.msg, true)
            } else {
              this.showConfirm(res.msg, false)
            }
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    closePreviewer() {
      this.$router.back()
    },
    closeMenu() {
      this.show8 = false
    },
    getToFirst() {
      this.$refs.previewer.goTo(0)
      this.$vux.toast.text('当前是第一页')
    },
    getToPage(index) {
      this.$refs.previewer.goTo(index)
      this.show8 = false
    },
    getToLast() {
      let len = this.list.length - 1
      this.$refs.previewer.goTo(len)
      this.$vux.toast.text('当前是最后一页')
    },
    openMenu(e) {
      this.show8 = true
    },
    nextPage() {
      if (this.currentIndex === this.list.length - 1) {
        this.$vux.toast.text('当前是最后一页')
        return
      }
      this.$refs.previewer.next()
    },
    openBook() {
      this.$refs.previewer.show(0)
      this.showPreviewer = true
    },
    prePage() {
      if (!this.currentIndex) {
        this.$vux.toast.text('当前是第一页')
        return
      }
      this.$refs.previewer.prev()
    },
    close(e) {
      return
    },
    logIndexChange(arg) {
      this.currentIndex = arg.currentIndex
    },
    show(index) {
      this.$refs.previewer.show(index)
    },
  },
  mounted() {
    // var ary = []
    // for (let i = 0; i < 94; i++) {
    //   ary.push({
    //     msrc: 'https://book.yunzhan365.com/qdirr/rebp/files/mobile/' + (i + 1) + '.jpg',
    //     src: 'https://book.yunzhan365.com/qdirr/rebp/files/mobile/' + (i + 1) + '.jpg',
    //     w: 375,
    //     h: 550,
    //   })
    // }
    // this.list = ary
    if (!ls.get('userVoId')) {
      this.showConfirm('您尚未登陆,请登陆后再查看您的手册')
      return
    }
    if (sessionStorage.getItem('manualList')) {
      this.list = JSON.parse(sessionStorage.getItem('manualList'))
      this.$nextTick(() => {
        this.$refs.previewer.show(0)
        this.showPreviewer = true
      })
      return
    }
    this.getManualList()
  },
  data() {
    return {
      currentIndex: 0,
      show8: false,
      showPreviewer: true,
      list: [],
      options: {
        showHideOpacity: false,
        loop: false,
        escKey: false,
        pinchToClose: false,
        closeOnVerticalDrag: false,
        tapToClose: false,
        tapToToggleControls: false,
        isClickableElement: function(el) {
          return /previewer-delete-icon-box/.test(el.className)
        },
        getThumbBoundsFn(index) {},
        getDoubleTapZoom: function(isMouseClick, item) {
          if (!isMouseClick) {
            return 1
          } else {
            return item.initialZoomLevel < 0.7 ? 4 : 3
          }
        },
      },
    }
  },
}
</script>
<style lang="less">
.menu_header {
  width: 100%;
  height: 0.8rem;
  background: #fff;
  text-align: center;
  line-height: 0.8rem;
  position: relative;
  z-index: 1000;
  font-size: 0.36rem;
  font-weight: 600;
  color: rgba(34, 34, 34, 1);
  img {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    right: 0.3rem;
    top: 0.2rem;
  }
}
.menu_box {
  width: 100%;
  height: auto;
  .content {
    flex-wrap: wrap;
    display: flex;
    width: 6.7rem;
    margin: 0 auto;
    padding-bottom: 0.3rem;
    padding-top: 1rem;
    .page_box {
      width: 2.1rem;
      height: auto;
      background: #fff;
      margin-right: 0.2rem;
      margin-top: 0.3rem;
      img {
        width: 2.1rem;
        height: auto;
        display: block;
        min-height: 3rem;
      }
      span {
        display: block;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.28rem;
        color: #222;
      }
    }
    .page_box:nth-of-type(3n) {
      margin-right: 0;
    }
  }
}
.closeBtn {
  width: 0.5rem;
  height: 0.5rem;
  position: fixed;
  left: 0.3rem;
  top: 0.15rem;
  z-index: 4000;
}
.pswp--supports-fs .pswp__button--fs {
  display: none !important;
}
.pswp__button--close {
  display: none !important;
}
.a1,
.a2,
.a3,
.a4,
.a5 {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  top: 0;
  img {
    display: block;
    width: 0.4rem;
    margin: 0.2rem auto;
    height: 0.4rem;
  }
}
.a1 {
  left: 0.3rem;
}
.a2 {
  left: 1rem;
}
.a3 {
  left: 1.8rem;
}
.a4 {
  right: 1.8rem;
}
.a5 {
  right: 1rem;
}
.btns {
  position: absolute;
  left: 200px;
  top: 200px;
}
.pswp__bg {
  background: #fff !important;
}
.pswp__zoom-wrap {
  margin-top: -20px;
}
.pswp__img {
  width: 100%;
  height: auto;
}
.pswp__top-bar {
  top: auto !important;
  bottom: 0px !important;
  background: #fff !important;
  box-shadow: 0px -4px 12px 0px rgba(238, 238, 238, 0.5);
  height: 0.8rem !important;
}
.pswp--css_animation .pswp__preloader__donut {
  border: 2px solid #222 !important;
}
.pswp__counter {
  width: 1.8rem;
  left: 50% !important;
  margin-left: -0.9rem;
  border-radius: 0.3rem;
  height: 0.6rem !important;
  top: 0.1rem !important;
  background: rgba(247, 247, 250, 1);
  text-align: center;
  color: #222222 !important;
  line-height: 0.6rem !important;
}
.ps-toolbar {
  opacity: 0.8 !important;
  bottom: 0 !important;
}
.vux-popup-dialog {
  z-index: 10000 !important;
}
.position-horizontal-demo {
  position: relative;
  height: 100%;
  z-index: 10000;
  .vux-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(4);
    color: #000;
  }
}
</style>
